<template>
	
	<view @click="change(item.choiceId)">
		<view :class="[item.isChose=='0'?'unselected':'selected']">
			<text>{{item.choiceId}}、</text>
			<text class="content-opt">{{item.choiceDesc}}</text>
		</view>
		<auto-img v-if="item.choiceType=='2'" :src="item.contentUrl"></auto-img>
		<video v-if="item.choiceType=='3'" :src="item.contentUrl"></video>
		<audio v-if="item.choiceType=='4'" :src="item.contentUrl"></audio>
	</view>
</template>

<script>
	import AutoImg from './AutoImg';
	export default{
		components:{
			AutoImg
		},
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		methods:{
			change(choiceId){
				console.log("item：",choiceId);
				this.$emit('change',choiceId);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unselected {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 20upx 0;
		padding: 30upx 20upx;
		font-size: 26upx;
		background: #f4f6f8;
		border-radius: 8rpx;
		color: #000;
	}
	
	.selected {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 20upx 0;
		padding: 30upx 20upx;
		font-size: 26upx;
		background: #5ea1f8;
		color: #fff;
		border-radius: 8rpx;
	}
</style>
